const path = require('path')

// 启动热更新的第二步
const webpack = require('webpack')

// 导入vue包里面的plugin插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

// 导入在内存中生成的HTML页面插件
// 只要是插件都一定要放到Plugins节点中去
/* 
 html-webpack-plugin这个插件的两个作用：
 1.自动在内存中根据指定页面生成一个内存的页面
 2.自动，把打包好的bundle.js追加到页面中去
 */
const htmlWebpackPlugin = require('html-webpack-plugin')

// 这个配置文件其实就是一个js文件,通过node中的模块操作,向外暴露了一个配置对象
module.exports = {
	// 需要手动指定 入口 和 出口
	entry: path.join(__dirname, './src/main.js'), //入口，表示要使用webpack打包哪个文件
	output: {
		// 输出文件的相关配置
		path: path.join(__dirname, './dist'), //指定打包好的文件输出到哪个目录中去
		filename: 'bundle.js' //这是指定输出的文件名称
	},
	mode: 'development',
// 	devServer: {
// 		// 这是配置dev-server命令参数的第二种方式，相对来说，这种方式麻烦一些
// 		open: 'Chrome', //自动打开谷歌浏览器
// 		port: 3000, //设置启动时候的运行端口
// 		contentBase: 'src', //指定托管的目录 
// 		hot: true, //启用热更新的第一步
// 
// 	},
	plugins: [
		// 配置插件的结点
		new webpack.HotModuleReplacementPlugin(), //new 一个热更新的模块对象，这是启用热更新的第三步
		new htmlWebpackPlugin({
			// 创建一个在内存中生成HTML页面的插件
			template: path.join(__dirname, './src/index.html'), //指定模板页面将来会根据指定的页面路径去生成内存中的页面
			filename: 'index.html' //指定生成页面的名称
		}),
		new VueLoaderPlugin()
	],
	module: {
		// 这个节点用于配置所有第三模块 加载器
		rules: [
			// 所有第三方模块的匹配规则
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			}, //配置处理.css文件的第三方loader规则
			{
				test: /\.less$/,
				use: ['style-loader', 'css-loader', 'less-loader']
			}, //配置处理.less文件的第三方loader规则
			{
				test: /\.scss$/,
				use: ['style-loader', 'css-loader', 'sass-loader']
			}, //配置处理.scss文件的第三方loader规则
			{
				test: /\.(jpg|png|jpeg|bmp|gif)$/,
				use: 'url-loader?limit=123176&name=[hash:8]-[name].[ext]'
			}, //配置处理图片路径的第三方loader规则
			// limit给定的值是图片大小，单位是byte,如果引用的图片大于或等于给定的limit值，则不会被转为base64格式的字符串
			// 如果图片小于limit值，则会转为base64字符串
			// 用 [hash:8]- 是防止在不同文件里命名一样的图片引起的重复现象
			{
				test: /\.(ttf|eot|svg|woff|woff2)$/,
				use: 'url-loader'
			}, //处理字体文件的loader
 		    {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
			// 这是配置Babel来转化高级的ES语法
			{test:/\.vue$/,use:'vue-loader'},
			// 这是处理.vue文件的loader
		]
	},
	resolve:{
		alias:{ //设置Vue被导入包的路劲
			"vue$": "vue/dist/vue.js"
		}
	}
}

/* 
   当我们在控制台直接输入webpack命令执行的时候，webpack做了以下几步：
   1.首先，webpack发现我们并没有通过命令的形式给它指定入口和出口
   2.webpack就会去项目的根目录中查找一个叫做'webpack.config.js'的配置文件
   3.当找到配置文件后，webpack会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中
   导出的配置对象
   4.当webpack拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建
 */
